import baseSet from '../baseSet'
import { spriteAssetsSprite, spriteAssetsTexture } from '@renderer/utils/bundle'
import * as PIXI from 'pixi.js'
import useDiydataStore from '@renderer/store/modules/useDiydataStore'
import { createEf } from '@renderer/utils/ef'
import { diydataCategoryClick } from '@renderer/utils/events'
import { setPixi, setPixiData } from '@renderer/store/modules/usePixiStore'

// 创建按钮
const createBtn = async (container: PIXI.Container<PIXI.ContainerChild>, text: string, coord: number): Promise<void> => {
  const btnContainer = new PIXI.Container()
  const checkedButton = await spriteAssetsSprite('set_checked_button')
  checkedButton.anchor.set(0.5)
  const button = await spriteAssetsSprite('set_checked_button')
  button.anchor.set(0.5)
  const btnText = new PIXI.Text({
    text,
    alpha: 1,
    style: {
      fontFamily: 'RZFont',
      fontSize: 48,
      fill: '#FFF7DB',
      align: 'center',
      dropShadow: {
        alpha: 0.55,
        distance: 3,
      },
    },
  })
  btnText.anchor.set(0.5)
  btnContainer.addChild(checkedButton)
  btnContainer.addChild(button)
  btnContainer.addChild(btnText)
  btnContainer.position.set((button.width - container.width) / 2, (coord + 1.5) * button.height * 1.1 - container.height / 2)
  container.addChild(btnContainer)
}
export default async (): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  const diydataStore = useDiydataStore()
  const { container, buttonsContainer, closeContainer, contentAreaContainer } = await baseSet('卡牌编辑')
  // 初始化store
  diydataStore.setContainer(container)
  {
    // 添加选项按钮
    await createBtn(buttonsContainer, '类别', 0)
    // 添加内容
    const categoryData = diydataStore.data.category

    // 按钮摆放所需参数
    const { width, height } = await spriteAssetsTexture('selectionType') // 标准两字按钮宽高
    let usedWidth = width * 0.5 // 横向已用宽度
    let whichRow = 0 // 所在行数
    categoryData.forEach(async (key: string) => {
      // 按钮
      const categoryContainer = new PIXI.Container() // 类型按钮容器
      // 文字
      const text = new PIXI.Text({
        text: key,
        style: {
          fontFamily: 'XQFont',
          fontSize: 32,
          fill: 0x333333,
          align: 'center',
        },
      })
      text.anchor.set(0.5)
      const unselection = await spriteAssetsSprite('unselectionType', { width: text.width + width * 0.5 })
      const selection = await spriteAssetsSprite('selectionType', { width: text.width + width * 0.5 })
      selection.visible = false
      categoryContainer.addChild(unselection)
      categoryContainer.addChild(selection)
      text.position.set(selection.width / 2 + 20, selection.height / 2 - 3)
      categoryContainer.addChild(text)
      if (usedWidth + categoryContainer.width > contentAreaContainer.width * 0.95) {
        whichRow++
        usedWidth = width * 0.5
      }
      categoryContainer.position.set(usedWidth - contentAreaContainer.width / 2, height * (1.5 + whichRow * 1.3) - contentAreaContainer.height / 2)
      usedWidth += categoryContainer.width + width * 0.1
      setPixi(categoryContainer.uid, categoryContainer)
      setPixiData(categoryContainer.uid, {
        key,
      })
      diydataCategoryClick.whiteAdd(categoryContainer)
      diydataStore.setCategoryMap(key, categoryContainer)
      contentAreaContainer.addChild(categoryContainer) // 添加到内容区
    })
  }
  // 窗口关闭事件
  const closeClick = createEf(
    () => {
      diydataStore.hidden()
    },
    { type: 'click', peimi: true },
  )
  closeClick.whiteAdd(closeContainer)
  // 添加到舞台容器
  // const mainContainer = app.stage.getChildByLabel('main')
  // mainContainer?.addChild(container)
  return container
}
